<template>
  <div style="height:100%;">
    <view-box ref="viewBox" style="padding-bottom: 0px" :body-padding-bottom="footerShow?'50px':'0px'">
      <x-header :left-options="headerLeft" slot="header"
                style="width:100%;position:fixed;left:0;top:0;z-index:100;background: #1d9dff;color: #fff; font-size: 16px;"
                :style="headerStyle" v-show="headerShow"
      >
        <div v-text="title" style="font-size: 16px;color: #fff"></div>
      </x-header>
      <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <router-view class="router-view"></router-view>
      </transition>
    </view-box>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import store from './store/index.js'
  import { Drawer, ViewBox, XHeader, Tabbar, TabbarItem } from 'vux'
  export default {
    name: 'hello',
    store,
    components: {
      Drawer, ViewBox, XHeader, Tabbar, TabbarItem
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        direction: 'forward',
        route: this.$route,
        url: 'http://zbz.chenchaoweb.cn/index.php/',
        image: 'http://192.168.10.103'
      }
    },
    computed: mapState({
      headerShow: state => state.headerShow,
      footerShow: state => state.footerShow,
      headerLeft: state => state.headerLeft,
      headerStyle: state => state.headerStyle,
      headerStyleColor: state => state.headerStyleColor,
      title: state => state.title
    }),
    methods: {
      verify: function () {
        console.log(33333)
      }
    },
    created: function () {
      this.verify()
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>

<style lang="less">
  /*公共部分*/
  @import '~vux/src/styles/reset.less';
  @tabbar-text-active-color: #f00;
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color: #f54085!important;
  }
  .vux-header .vux-header-left .left-arrow:before{
    border-top:1px solid #fff!important;
    border-left:1px solid #fff!important;
  }
  html,body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .nosta{
    text-align: center;
    padding-top: 40px;
    color: #a2a2a2;
  }
  .bg_color{
    background: #f0f0f0;
    position: fixed;
    z-index:-1;
    width:100%;
    height:100%;
    top: 0px;
    left:0px;
  }
  .vux-header .vux-header-title{
    color: #000!important;
    font-size:16px!important;
  }
  .weui-tabbar__label{
    line-height: 1.6!important;
  }
  .weui-tabbar__icon{
    width: 25px!important;
    height: 24px!important;
  }
  input,textarea{
    outline: none;
  }
  .bg_gray{
    background: #f5f5f5;
    position: fixed;
    z-index:-1;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
  }
  body{
    font-family: '微软雅黑'!important;
  }
  * {
    margin: 0;
    padding: 0;
    font-family: '微软雅黑';
    font-size: 14px;
  }

  .font22 {
    font-size: 22px;
  }

  .font20 {
    font-size: 20px;
  }

  .font18 {
    font-size: 18px;
  }

  .font16 {
    font-size: 16px;
  }

  .font12 {
    font-size: 12px;
  }

  .font10 {
    font-size: 10px;
  }

  .font26 {
    font-size: 26px;
  }

  .font28 {
    font-size: 28px;
  }
  .font30{
    font-size: 30px;
  }
  .font32 {
    font-size: 32px;
  }

  .font40 {
    font-size: 40px;
  }
  .font42 {
    font-size: 42px;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }
  .weui-tabbar{
    position: fixed!important;
  }
  .classStud{
    color: #7a023c;
  }
  @media only screen and (max-width: 320px) {
    .examinationLeft div{
      width: auto;
    }
  }
  .weui-cells{
    margin-top:0px!important;
    padding: 0px 15px;
  }
</style>
